<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础知识复习</title>
    <style>
        .post {
            width: 400px;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            background-color: rgb(216, 216, 216);
            border: 1px solid red
        }

        .todo-text {
            font-size: 1.3em;
            margin-left: 5px;
        }

        .delete {
            text-decoration: line-through;
            font-style: italic;
            color: gray;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: all 1.5s;
        }

        .fade-enter,
        .fade-leave-to{
            opacity: 0;
            transform: translateX(100px);
        }
        .fade-enter-to,
        .fade-leave{
            transform: translateX(0);
            opacity: 1;
        }
        
    </style>
</head>

<body>

    <div id="app">
        <my-post post-title='由props传入的标题' post-content='有props传入的内容'>
        </my-post>
        <my-post>

        </my-post>
        <hr>
        <todo-list :todo-list-data-prop="todoListData" v-on:add-todo="addTodo" v-on:change-list="changeMyList">
        </todo-list>

    </div>

    <script src="./js/vue.js"></script>
    <script src="./js/component.js"></script>
</body>

</html>